<template>
  <CollapseItem title="Conditional">
    <template #content>
      <FormItemInput v-model="bo.variableName" label="Variable name" />
      <FormItemSelect
        v-if="isNotStart"
        v-model="bo.variableEvents"
        :options="allVariableEvents"
        label="Variable events"
        :multiple="true"
      />
      <FormItemSelect
        v-model="conditionType"
        :options="conditionTypes"
        label="Condition Type"
        @change="writeCondition({})"
      />
      <Condition v-model="bo" :condition-type="conditionType" @save-condition="writeCondition" />
    </template>
  </CollapseItem>
</template>

<script>
import Condition from '../../part/detail/Condition'
import CollapseItem from '../../ui/CollapseItem'
import FormItemInput from '../../ui/FormItemInput'
import FormItemSelect from '../../ui/FormItemSelect'
import { customize, getEventDefinition } from '../../../utils'
import { CONDITION_TYPES, VARIABLE_EVENTS } from '../../../utils/constants'
import { createFormalExpression } from '../../../utils/creators'
import { is } from 'bpmn-js/lib/util/ModelUtil'

export default {
  name: 'Conditional',
  components: {
    Condition,
    CollapseItem,
    FormItemInput,
    FormItemSelect
  },
  props: {
    element: {
      type: Object,
      required: true,
      readOnly: true
    },
    moddle: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      allVariableEvents: VARIABLE_EVENTS,
      conditionTypes: CONDITION_TYPES,
      conditionType: undefined
    }
  },
  computed: {
    bo() {
      return getEventDefinition(this.element)
    },
    isNotStart() {
      return !is(this.element, 'bpmn:StartEvent')
    }
  },
  watch: {
    'bo.variableName'(val) {
      this.$emit('save-conditional', { variableName: val?.length ? val : undefined })
    },
    'bo.variableEvents'(val) {
      this.$emit('save-conditional', { variableEvents: val?.length ? val : undefined })
    }
  },
  created() {
    this.sync()
  },
  methods: {
    sync() {
      const condition = this.bo.condition
      if (condition) {
        if (condition.language) {
          this.conditionType = 'script'
          this.bo.scriptFormat = condition.language
          if (condition.body) {
            this.bo.scriptType = 'script'
            this.bo.config = condition.body
          } else {
            this.bo.scriptType = 'resource'
            this.bo.config = condition.resource
          }
        } else {
          this.conditionType = 'expression'
          this.bo.config = condition.body
        }
      }
    },
    writeCondition(obj) {
      let props
      if ('expression' in obj && obj.expression) {
        props = createFormalExpression(this.moddle, { body: obj.expression })
      } else if ('script' in obj && obj.script) {
        props = createFormalExpression(this.moddle, {
          language: obj.scriptFormat,
          body: obj.script
        })
      } else if ('resource' in obj && obj.resource) {
        props = createFormalExpression(this.moddle, {
          language: obj.scriptFormat,
          [ customize('resource') ]: obj.resource
        })
      }
      this.$emit('save-conditional', { condition: props })
    }
  }
}
</script>
